<template>
  <div class="box">
    <el-dialog title="工单详情" :visible.sync="jobDetails.show" width="55%" :close-on-click-modal="false" @close="handStart">
      <el-tabs class="noScorllFixed" v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="basicInfo">
          <!-- class="p_15" -->
          <el-row class="detailsRow">
            <el-col :span="12">
              <el-row class="details-row">
                <span>工单编号：</span>
                <span>{{ shuju.gdbh }}</span>
              </el-row>
              <el-row class="details-row">
                <span>设备类型：</span>
                <span>
                  {{ shuju.zclxmc1 ? shuju.zclxmc1 + ' / ' : '' }}
                  {{ shuju.zclxmc2 ? shuju.zclxmc2 + ' / ' : '' }}
                  {{ shuju.zclxmc3 }}
                </span>
              </el-row>
              <el-row class="details-row">
                <span>工单等级：</span>
                <span>
                  <el-tag type="success" v-if="shuju.gddj === 1">一般</el-tag>
                  <el-tag type="warning" v-else-if="shuju.gddj === 2">紧急</el-tag>
                  <el-tag type="danger" v-else-if="shuju.gddj === 3">加急</el-tag>
                </span>
              </el-row>
              <el-row class="details-row">
                <span>设备序列码：</span>
                <span>{{ shuju.sbxlh }}</span>
              </el-row>
              <el-row class="details-row">
                <span>设备IP：</span>
                <span>{{ shuju.sbip }}</span>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row class="details-row">
                <span>设备名称：</span>
                <span>{{ shuju.zcmc }}</span>
              </el-row>
              <el-row class="details-row">
                <span>工单状态：</span>
                <span :class="['workOrderType', 'active-' + shuju.gdzt]">{{ caculType(shuju.gdzt) }}</span>
              </el-row>
              <el-row class="details-row">
                <span>受理人：</span>
                <span>{{ shuju.slrzsxm }}</span>
              </el-row>
              <el-row class="details-row">
                <span>接单人：</span>
                <span>{{ shuju.dqclrzsxm }}</span>
              </el-row>
              <el-row class="details-row">
                <span>接单时间：</span>
                <span>{{ shuju.slsj | dateFormat }}</span>
              </el-row>
              <!-- <el-row>
                <span>故障类型：</span>
                <span>{{ shuju.lxmcs ? shuju.lxmcs + ' / ' : '' }}</span>
                <span>{{ shuju.gzlbmc }}</span>
              </el-row> -->
              <!-- <el-row>
                <span>故障描述：</span>
                <span>{{ shuju.gzms }}</span>
              </el-row> -->
              <!-- <el-row>
                <span>报障时间：</span>
                <span>{{ shuju.bzsj | dateFormat }}</span>
              </el-row> -->
            </el-col>
          </el-row>
          <el-table v-loading="tableLoad" border :header-cell-style="{ backgroundColor: '#ECF3FC' }" :data="tableData" style="width: 100%; margin-top: 15px">
            <template slot="empty">{{ tableMessage }}</template>
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="date" label="故障类型" min-width="180">
              <template slot-scope="scope">{{ scope.row.lxmcs }}/{{ scope.row.wtlxmc }}</template>
            </el-table-column>
            <el-table-column prop="name" label="故障描述" min-width="300">
              <template slot-scope="scope">{{ scope.row.gzms }}</template>
            </el-table-column>
            <el-table-column prop="address" label="报障时间" width="150">
              <template slot-scope="scope">{{ scope.row.bzsj | dateFormat }}</template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="工单跟踪" name="workOrder">
          <div style="width: 100%; padding: 5px; box-sizing: border-box">
            <el-row :gutter="20" class="" style="margin: 0; padding: 10px 5px 10px 18px; width: 100%">
              <el-col :span="4">
                <span>时间</span>
              </el-col>
              <el-col :span="3">
                <span>耗时</span>
              </el-col>
              <el-col :span="4">
                <span>步骤</span>
              </el-col>
              <el-col :span="5">
                <span>备注</span>
              </el-col>
              <el-col :span="2">
                <span>处理人</span>
              </el-col>
              <el-col :span="6">
                <span>附件</span>
              </el-col>
            </el-row>
          </div>
          <!-- <el-row class="p_15">
            <el-col :span="24"> -->
          <el-timeline class="timeBox">
            <el-timeline-item v-for="(activity, index) in shuju.gdclmx" :key="index" :color="activity.color">
              <el-row :gutter="20" :class="['timelineItem', index === 0 ? 'bgcolor' : '']">
                <el-col :span="4">
                  <span>{{ activity.clsj | dateFormat }}</span>
                </el-col>
                <el-col :span="3">
                  <span>{{ activity.hs }}</span>
                </el-col>
                <el-col :span="4">
                  <span>{{ activity.czbt }}</span>
                </el-col>
                <el-col :span="5">
                  <span>{{ activity.cznr }}</span>
                </el-col>
                <el-col :span="2">
                  <span>{{ activity.czr_ZSXM }}</span>
                </el-col>
                <el-col :span="6">
                  <!-- 查看图片 -->
                  <div style="width: 100%; min-height: 1px">
                    <div v-show="activity.tp">
                      <!-- <el-button v-show="activity.tp === null || activity.tp === '[]' ? false : true" type="text" @click="lookImg(activity.tp)">查看图片</el-button> -->
                      <!-- 图片 -->
                      <el-image v-for="(jtem, index) in activity.images" :key="index" :src="jtem" :preview-src-list="activity.images">
                        <div slot="error">
                          <img style="width: 100%" :src="jtem" alt />
                        </div>
                      </el-image>
                      <!-- 视频 -->
                      <div class="input_video">
                        <video-player
                          v-for="(ztem, zndex) in activity.videos"
                          :key="zndex + 100"
                          class="video-player vjs-custom-skin"
                          ref="videoPlayer"
                          :playsinline="true"
                          :options="ztem"
                          @play="onPlayerPlay($event, ztem)"
                        ></video-player>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-timeline-item>
          </el-timeline>
          <!-- </el-col>
              </el-row> -->
        </el-tab-pane>
        <!-- <el-tab-pane label="故障详细" name="gzxx">
          <el-table v-loading="tableLoad" :data="tableData" style="width: 100%; margin-top: 15px">
            <template slot="empty">{{ tableMessage }}</template>
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column prop="date" label="故障类型" width="180">
              <template slot-scope="scope">{{ scope.row.lxmcs }}/{{ scope.row.wtlxmc }}</template>
            </el-table-column>
            <el-table-column prop="name" label="故障描述" width="500">
              <template slot-scope="scope">{{ scope.row.gzms }}</template>
            </el-table-column>
            <el-table-column prop="address" label="报障时间">
              <template slot-scope="scope">{{ scope.row.bzsj | dateFormat }}</template>
            </el-table-column>
          </el-table>
        </el-tab-pane> -->
      </el-tabs>
      <el-dialog :visible.sync="dialogVisible" :modal="false">
        <el-image style="width: 100%; height: 600px" :src="dialogImageUrl" fit="contain" :preview-src-list="srcList"></el-image>
      </el-dialog>
      <!-- 分页 -->
      <el-row class="page-row noBorder" style="padding-top: 10px">
        <el-col :span="12">
          <el-pagination
            v-if="activeName === 'basicInfo'"
            background
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            layout=" prev, pager, next,total"
            :total="total"
          ></el-pagination>
        </el-col>
        <el-col :span="12" style="height: 47px; display: table">
          <el-button type="primary" size="small" @click="handStart" class="btnSizeStyle">关 闭</el-button>
        </el-col>
      </el-row>
      <!-- <span slot="footer">
        <el-button type="primary" @click="handStart" class="btnSizeStyle">关 闭</el-button>
      </span> -->
    </el-dialog>
    <!-- 视频弹窗 -->
    <el-dialog class="videoDialog" :visible.sync="videoVisibe" width="55%" :close-on-click-modal="false" @close="videoClose">
      <div class="input_video play_input_video">
        <video-player class="video-player vjs-custom-skin" ref="videoPlayerDialog" :playsinline="true" :options="videoOptions"></video-player>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { yeWu } from '../../utils/allUrl.js'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
import videojs from 'video.js'
// videojs plugin
const Plugin = videojs.getPlugin('plugin')
class ExamplePlugin extends Plugin {
  // something...
}
videojs.registerPlugin('examplePlugin', ExamplePlugin)

// videojs language
videojs.addLanguage('es', {
  Pause: 'Pausa',
  // something...
})
export default {
  props: ['jobDetails'],
  data() {
    return {
      shuju: {
        gdbh: '',
        gddjmc: '',
        gdzt: '',
        zcmc: '',
        sbip: '',
        gzlb: '',
        gzms: '',
        bzsj: '',
        slrzsxm: '',
        dqclrzsxm: '',
        slsj: '',
        gdclmx: [],
      },
      dialogVisible: false,
      dialogImageUrl: '',
      srcList: [],
      activeName: 'basicInfo',
      tableData: [],
      currentPage: 1,
      total: 0,
      tableLoad: false,
      tableMessage: '',
      tableTimer: null,
      videoOptions: {},
      videoVisibe: false,
      itemData: '',
    }
  },
  computed: {
    caculType() {
      // 计算属性传参需要使用闭包
      return function (index) {
        const arr = ['已受理', '待确认', '正常关闭', '驳回', '挂起', '外派', '异常关闭']
        return arr[index - 1]
      }
    },
  },
  watch: {
    jobDetails: {
      // 正确给 cData 赋值的 方法
      deep: true,
      handler: function (newVal, oldVal) {
        if (newVal.show) {
          this.getshu(newVal)
          this.itemData = newVal
          this.activeName = this.jobDetails.activeName
          this.currentPage = 1
          clearTimeout(this.tableTimer)
          this.tableLoad = true
          this.selectGuZhangByGDBH()
        }
      },
    },
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.tableData = []
          this.tableMessage = tableMessageText
        }
      }, timeLoad)
    },
  },
  created() {
    this.itemData = this.jobDetails
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
      clearTimeout(this.tableTimer)
      this.selectGuZhangByGDBH()
    },
    handleClick(tab, event) {
      // 标签页事件
      switch (tab.index) {
        case 0: // 基本信息
          // 故障详细
          this.currentPage = 1
          clearTimeout(this.tableTimer)
          this.tableLoad = true
          this.selectGuZhangByGDBH()
          break
        case 1: // 工单跟踪
          // 获取图片
          break
        default:
          // // 故障详细
          // this.currentPage = 1
          // clearTimeout(this.tableTimer)
          // this.tableLoad = true
          // this.selectGuZhangByGDBH()
          break
      }
    },
    handStart() {
      this.$emit('jobDetailsOff', {
        type: false,
      })
      this.shuju = {
        gdbh: '',
        gddjmc: '',
        gdzt: '',
        zcmc: '',
        sbip: '',
        gzlb: '',
        gzms: '',
        bzsj: '',
        slrzsxm: '',
        dqclrzsxm: '',
        slsj: '',
        gdclmx: [],
      }
    },
    // getImgList(index) {
    //   let arr = []
    //   let i = 0
    //   for (i; i < this.imgArr.length; i++) {
    //     arr.push(this.imgArr[i + index])
    //     if (i + index >= this.imgArr.length - 1) {
    //       index = 0 - (i + 1)
    //     }
    //   }
    //   return arr
    // },
    onPlayerPlay(event, item) {
      // 停止播放
      this.videoOptions = {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 倍速控制
        autoplay: true, // 是否自动播放
        muted: false, // 是否静音播放
        loop: false, // 是否循环播放
        preload: 'auto',
        language: 'zh-CN', // 语言，还要引入对应的文件
        aspectRatio: '16:9', // 比例
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: item.sources,
        poster: '', // 你的封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          playToggle: true, // 播放暂停按钮
          timeDivider: true, // 分隔符
          durationDisplay: true, // 总时间
          remainingTimeDisplay: false, // 剩余时间是否显示，有一个即可
          currentTimeDisplay: true, // 当前播放时间
          fullscreenToggle: true, // 全屏按钮
          volumeMenuButton: true, // 音量控制
          progressControl: true, // 播放进度条
          playbackRateMenuButton: true, // 倍速
        },
      }
      this.videoVisibe = true
      // this.onPlayerPause()
    },
    // 暂停弹窗播放视频
    onPlayerPauseDialog(pause) {
      this.$refs.videoPlayerDialog.player.pause()
    },
    // onPlayerPause(pause) {
    //   console.log(pause)
    //   this.$refs.videoPlayer.player.pause()
    // },
    // 关闭弹窗
    videoClose() {
      this.onPlayerPauseDialog()
      this.getshu(this.itemData)
    },
    // 基本信息/工单跟踪
    async getshu(val) {
      const params = new URLSearchParams()
      params.append('GDBH', val.gdbh)
      // const { data: res } = await this.$http.post(`${yeWu}gdjs/gdxq`, params)
      const { data: res } = await this.$http.post(`${yeWu}gdgl/selectGongdanXiangQing`, params)
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      // if (res.data.gdclmx) {
      //   res.data.gdclmx[res.data.gdclmx.length - res.data.gdclmx.length].color = '#0bbd87'
      // }
      // 判断图片是否有
      // res.data.images = []
      // var images = []
      // console.log(res.data, '-----', res.data.gdclmx, '---', typeof res.data.gdclmx)
      if (res.data.gdclmx) {
        var gdclmxs = res.data.gdclmx
        gdclmxs.forEach((item, index) => {
          item.hs = ''
          item.images = []
          item.videos = []
          item.color = ''
          // 设置圆点颜色
          if (index === 0) {
            item.color = '#0bbd87 '
          }
          if (index < gdclmxs.length - 1) {
            item.hs = this.timeago(item.clsj, gdclmxs[index + 1].clsj)
          } else {
            item.hs = ''
          }
          if (item.tp) {
            // 判断是否存在图片地址json串
            item.tp = JSON.parse(item.tp)
            var sourcesArr = []
            for (var i = 0; i < item.tp.length; i++) {
              if (item.tp[i].url.indexOf('.mp4') !== -1) {
                // 存储视频
                sourcesArr.push({
                  type: 'video/mp4', // 指定文件样式
                  src: item.tp[i].url, // 视频地址
                })
                item.videos.push({
                  playbackRates: [0.5, 1.0, 1.5, 2.0], // 倍速控制
                  autoplay: false, // 是否自动播放
                  muted: true, // 是否静音播放
                  loop: false, // 是否循环播放
                  preload: 'auto',
                  language: 'zh-CN', // 语言，还要引入对应的文件
                  // aspectRatio: '4:3', // 比例
                  aspectRatio: '16:9', // 比例
                  fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                  sources: sourcesArr,
                  poster: '', // 你的封面地址
                  notSupportedMessage: '此视频暂无法播放，请稍后再试',
                  controlBar: false, // 隐藏进度条
                  // controlBar: {
                  //   playToggle: false, // 播放暂停按钮
                  //   timeDivider: false, // 分隔符
                  //   durationDisplay: false, // 总时间
                  //   remainingTimeDisplay: false, // 剩余时间是否显示，有一个即可
                  //   currentTimeDisplay: false, // 当前播放时间
                  //   fullscreenToggle: false, // 全屏按钮
                  //   volumeMenuButton: false, // 音量控制
                  //   progressControl: false, // 播放进度条
                  //   playbackRateMenuButton: false, // 倍速
                  // },
                })
              } else {
                // 存储图片
                item.images.push(item.tp[i].url)
              }
            }
            // this.playerOptions.sources = item.videos
          }
        })
      }
      this.shuju = res.data
      // this.shuju.images = images
      // if(res.data.gdclmx){
      //   res.data.gdclmx
      // }
      // this.lookImg(res.data.gdclmx)
    },
    timeago(time1, time2) {
      var timeDay = ''
      var timeHour = ''
      var timeMinutes = ''
      var endTime = time1 / 1000 - parseInt(time2 / 1000)
      timeDay = parseInt(endTime / 60 / 60 / 24) // 相差天数
      endTime = endTime - timeDay * 60 * 60 * 24
      timeHour = parseInt(endTime / 60 / 60) // 相差小时
      endTime = endTime - timeHour * 60 * 60
      timeMinutes = parseInt(endTime / 60) // 相差分钟
      // console.log(endTime - timeMinutes * 1000)
      if (timeDay === 0 && timeHour === 0 && timeMinutes === 0) {
        return '1分钟'
      }
      return `${timeDay > 0 ? timeDay + '天' : ''}` + `${timeHour > 0 ? timeHour + '时' : ''}` + `${timeMinutes > 0 ? timeMinutes + '分' : ''}`
    },
    // 故障详细
    async selectGuZhangByGDBH(val) {
      const params = new URLSearchParams()
      params.append('M_', this.currentPage)
      params.append('N_', 10)
      params.append('GDBHS', this.jobDetails.gdbh)
      const { data: res } = await this.$http.post(`${yeWu}gz/selectGuZhangByGDBH`, params)
      this.tableLoad = false
      // console.log(res)
      switch (res.code) {
        case '0000':
          this.tableData = res.data.list
          this.total = res.data.count
          break
        default:
          this.tableData = []
          this.total = 0
          this.tableMessage = res.message
          break
      }
    },
    lookImg(val) {
      if (val) {
        const img = JSON.parse(val)
        const arr = []
        img.forEach((item) => {
          arr.push(item.url)
        })
        this.dialogVisible = true
        this.dialogImageUrl = arr[0] || ''
        this.srcList = arr
      }
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/detailsRow.scss';
::v-deep label {
  color: #7a7a7a !important;
  font-size: 16px !important;
}
// ::v-deep .el-icon-circle-close {
//   font-size: 45px;
// }
// ::v-deep .el-image-viewer__close {
//   background-color: #fff;
// }
.box {
  width: 100%;
  height: 100%;
  .el-form-item {
    padding-bottom: 5px !important;
    margin: 0;
    .item {
      // padding: 0 15px;
      // height: 40px;
      line-height: 40px;
      border-radius: 3px;
    }
  }
  .timeBox {
    padding: 3px 5px;
    max-height: 550px;
    overflow: auto;
    .timelineItem {
      width: 100%;
      span {
        display: inline-block;
        min-width: 10px;
        min-height: 1px;
        .el-button {
          padding: 0 15px;
        }
      }
      &.bgcolor {
        span {
          color: #0bbd87 !important;
        }
      }
    }
  }
  .usersNumber {
    cursor: pointer;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    white-space: nowrap;
    position: relative;
  }
  .usersNumber:after {
    content: '. . .';
    text-align: right;
    position: absolute;
    top: 4px;
    bottom: 0;
    right: 0;
    width: 10%;
    height: 1.8em;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
  }
  .p_15 {
    padding-top: 15px;
  }
  .workOrderType {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 8px;
    border-radius: 3px;
    &.active-1 {
      // 已受理
      border: 1px solid #c2dfff;
      background-color: #e8f3ff;
      color: #2e92f7 !important;
    }
    &.active-2,
    &.active-3 {
      // 已解决待确认2  正常关闭3
      border: 1px solid #c2e7b0;
      background-color: #f0f9eb;
      color: #67c23a !important;
    }
    // &.active-3 {
    //   // 未解决带调度
    //   border: 1px solid $type3B;
    //   background-color: $type3BC;
    //   color: $type3C;
    // }
    &.active-4,
    &.active-6 {
      // 驳回 4  // 外派 6
      border: 1px solid #f5dab1;
      background-color: #fdf6ec;
      color: #e6a23c !important;
    }
    &.active-5 {
      // 挂起5
      border: 1px solid #d5d6d8;
      background-color: #f4f4f5;
      color: #909399 !important;
    }
    &.active-7 {
      // 异常关闭
      border: 1px solid #fbc7c7;
      background-color: #fef0f0;
      color: #f56c6c !important;
    }
  }
}
::v-deep .videoDialog {
  .play_input_video {
    padding-top: 2%;
    width: 100%;
    height: 80%;
  }
  .el-dialog {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
      font-size: 15px;
      font-weight: 800;
      border: 3px solid #fff;
      border-radius: 50%;
      padding: 5px;
    }
  }
}
// 播放器样式
.el-image,
.input_video {
  width: 50px;
  height: 28px;
  display: inline-block;
  margin-right: 5px;
}
::v-deep .input_video {
  margin: 0 auto;
  .vjs-custom-skin > .video-js .vjs-big-play-button {
    background-color: transparent;
    border: 0;
    font-size: 2.3em;
    border-radius: 50%;
    outline: none;
    height: 45px !important;
    line-height: 45px !important;
    margin-top: -1em !important;
    margin-left: -1em !important;
    width: 45px !important;
  }
  &.play_input_video {
    .vjs-custom-skin > .video-js .vjs-big-play-button {
      background-color: rgba(0, 0, 0, 0.45);
      font-size: 3.5em;
      height: 2em !important;
      line-height: 2em !important;
      margin-top: -1em !important;
      margin-left: -1em !important;
      width: 2em !important;
      .vjs-icon-placeholder {
        font-size: 30px;
      }
    }
  }
  // .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  //   position: absolute;
  //   left: 0;
  //   width: 100%;
  //   height: 100%;
  // }

  // /*control-bar布局时flex，通过order调整剩余时间的位置到进度条右边*/
  // .vjs-custom-skin > .video-js .vjs-control-bar .vjs-remaining-time {
  //   order: 3 !important;
  // }

  // /*进度条背景轨道*/
  // .video-js .vjs-slider {
  //   border-radius: 1em;
  // }

  // /*进度条进度*/
  // .vjs-custom-skin > .video-js .vjs-play-progress,
  // .vjs-custom-skin > .video-js .vjs-volume-level {
  //   border-radius: 1em;
  // }

  // /*鼠标进入播放器后，播放按钮颜色会变*/
  // .video-js:hover .vjs-big-play-button,
  // .vjs-custom-skin > .video-js .vjs-big-play-button:active,
  // .vjs-custom-skin > .video-js .vjs-big-play-button:focus {
  //   background-color: rgba(0, 0, 0, 0.4) !important;
  // }

  // /*control bar*/
  // .video-js .vjs-control-bar {
  //   background-color: rgba(0, 0, 0, 0.2) !important;
  // }

  // /*点击按钮时不显示蓝色边框*/
  // .video-js .vjs-control-bar button {
  //   outline: none;
  // }
  .vjs-menu li {
    color: #fff;
  }
  .vjs-menu li.vjs-selected,
  .vjs-menu li.vjs-selected:focus,
  .vjs-menu li.vjs-selected:hover {
    color: #2b333f;
  }
}
::v-deep .checkGroup .el-form-item__content {
  line-height: 33px;
  height: 33px;
}
</style>
